<template>
    <div class='h-100 relative'>
        <section class='flex'>
            <div style='flex:13'>
                <section class='flex'>
                    <div style='flex:9'>
                        <div id='device-category'>
                            <glass-box>
                                <div slot='title' class='color-f5f5f5'>设备类型</div>
                                <div class='m-t-10'>
                                    <div id='device-category-chart'>
                                        <device-category-chart v-model='deviceCategoryData'></device-category-chart>
                                    </div>
                                </div>
                            </glass-box>
                        </div>
                        <div id='pay-category' class='m-t-20'>
                            <glass-box>
                                <div slot='title' class='color-f5f5f5'>支付类型</div>
                                <div class='m-t-10'>
                                    <div id='pay-category-chart'>
                                        <pay-category-chart v-model='payCategoryData'></pay-category-chart>
                                    </div>
                                </div>
                            </glass-box>
                        </div>
                    </div>
                    <div style='flex:11' id='part-2' class='m-l-20'>
                        <glass-box>
                            <div slot='title' class='color-f5f5f5'>地域/在线状态</div>
                            <div class='m-t-10' id='area-device-chart'>
                                <area-device-chart v-model='areaDeviceData'></area-device-chart>
                            </div>
                            <div class='m-t-20'>
                                <title-body v-size.paddingLeft='55' v-size.paddingRight='30'>
                                    <span slot='title' class='color-f5f5f5 f-20'>充电时长<span v-size.fontSize='14'>（小时）</span></span>
                                    <span class='absolute middle' style='right:0px'>
                                        <color-block-text class='m-l-20' type='square' color='#20c0fd'>总充电时长</color-block-text>
                                        <color-block-text class='m-l-20' type='line' color='#59ffaf'>平均充电时长</color-block-text>
                                    </span>
                                </title-body>

                                <div id='charge-time-chart' class='m-t-20'>
                                    <charge-time-chart v-model='chargeTimeData'></charge-time-chart>
                                </div>
                            </div>
                        </glass-box>
                    </div>
                </section>
                <section id='part-3'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>通讯方式</div>
                        <div class='flex m-t-20'>
                            <div v-flex='9'></div>
                            <div v-flex='11' v-size.paddingLeft='30' class='m-l-20'>网关类型</div>
                        </div>
                        <div class='flex m-t-15'>
                            <div style='flex:9' id='network-category-chart'>
                                <network-category-chart v-model='networkCategoryData'></network-category-chart>
                            </div>
                            <div style='flex:11' class='m-l-20'>
                                <gateway-category-chart v-model='gatewayCategoryData'></gateway-category-chart>
                            </div>
                        </div>
                    </glass-box>
                </section>
            </div>
            <div style='flex:7' id='right-part' class='m-l-20'>
                <glass-box>
                    <div slot='title' class='color-f5f5f5'>使用次数<span class='color-a9abaf m-l-20 f-14'>截止昨日近七天，所有用户</span></div>
                    <div id='use-count-chart' class='m-t-40'>
                        <lately-use-count-chart v-model='latelyUseCountData'></lately-use-count-chart>
                    </div>
                    <div class='m-t-40'>
                        <div v-size.paddingLeft='55'>
                            <span class='color-f5f5f5 f-20'>耗电电量<span class='f-16'>（度）</span><span class='color-a9abaf m-l-10 f-14'>截止昨日近七天，所有用户</span></span>
                        </div>
                        <div id='consume-power-chart' class='m-t-30'>
                            <lately-consume-power-chart v-model='latelyConsumePowerData'></lately-consume-power-chart>
                        </div>
                    </div>
                    <div class='m-t-30'>
                        <div v-size.paddingLeft='55'>
                            <div class='color-f5f5f5 f-20'>收藏数</div>
                            <div id='collect-chart' class='m-t-30'>
                                <collect-chart v-model='collectData'></collect-chart>
                            </div>
                        </div>
                    </div>
                </glass-box>
            </div>
        </section>
    </div>
</template>

<script src='./index.js'></script>

<style scoped lang='scss' src='./index.scss'></style>